<template>
  <div class="details_box">
    <div class="details_header">
      <div class="title" @click="back">
        <img src="../../assets/image/back.jpg" class="title_icon" alt="">
        <span class="title_name">返回上一级</span>
      </div>
    </div>
    <div class="details_content">
      <div class="problem_box">
        <div class="problem">
          <li><span class="lable">问题类型：</span> <span class="content">{{ problemState.info.qsType }}</span></li>
          <li><span class="lable">问题关键词：</span>
            <span v-for="item in problemState.info.keyWords" :key="item" class="content check_item">{{ item }}</span>
          </li>
          <li><span class="lable">问题描述：</span> <span class="content">{{ problemState.info.description }}</span></li>
          <!-- <li><span class="lable file_lable">附件：</span>
            <span class="content">
              <a-upload :multiple="true" list-type="picture-card" @preview="previewView" :file-list="fileList"
                :showUploadList="{ showRemoveIcon: false }">
              </a-upload>
            </span>
          </li> -->
        </div>
        <div class="time">
          时间:{{ problemState.info.createdAt }}
        </div>
      </div>
      <div class="reply_box">
        <div class="reply"
          :class="{ 'reply_empty': (!problemState.info.replyList || !problemState.info.replyList.length) }">
          <div class="reply_item" v-for="item in problemState.info.replyList" :key="item.id">
            <div class="reply_title" v-if="item.roleType == 0">客服回复：</div>
            <div class="reply_title" v-else>反馈人回复：</div>
            <!-- <li v-if="item.roleType == 0"><span class="lable">处理方式：</span>
              <a-radio-group name="radioGroup" disabled v-model:value="item.replyType">
                <a-radio :value="1">线上回复</a-radio>
                <a-radio :value="2">线下沟通</a-radio>
              </a-radio-group>
            </li> -->
            <li v-if="item.replyType == '2'"><span class="lable">处理人：</span>
              <span class="content check_item">{{ item.createdBy }}</span>
            </li>
            <li v-if="item.replyType == '2'"><span class="lable">处理时间：</span> <span class="content">{{ item.createdAt
            }}</span></li>
            <li v-if="item.replyType == '1'">
              <span class="lable lable_text">“{{ item.createdBy }}”回复</span>
              <a-textarea :disabled="true" class="content" v-model:value="item.reply" />
            </li>
            <!-- <li>
              <span class="lable">附件：</span>
              <span class="content file_content">
                <a :href="val.filePath" v-for="val in item.files" :key="val.filePath">
                  <div> {{ val.fileName }}</div>
                </a>
              </span>
            </li> -->
          </div>
          <p v-if="!problemState.info.replyList || !problemState.info.replyList.length"> 管理员在回复的路上，请耐心等待······</p>
        </div>
      </div>
      <div class="reply-bottom">
        <div class="button"
          style="margin-top: 20px"
          v-if="problemState.info.replyList && problemState.info.replyList.length && !problemState.isReply">
          <a-button @click="handlReply" type="primary">未解决，继续反馈</a-button>
        </div>
        <div v-if="problemState.isReply" class="reply_item reply_form_bottom">
          <div class="reply_title">继续反馈：</div>
          <a-form ref="formRef" :model="problemState.form" :rules="problemState.rules">
            <a-form-item label="反馈内容" placeholder="限制300个字符" name="reply">
              <a-textarea v-model:value="problemState.form.reply" type="textarea" />
            </a-form-item>
            <!-- <a-form-item label="附件" placeholder="限制300个字符" name="files">
                <a-upload accept=".png,.jpeg,.PNG,.JPEG,.mp4" :customRequest="customRequest" list-type="picture-card"
                  :file-list="uploadFileList" @preview="handlePreview" @remove="handerRemove">
                  <div v-if="uploadFileList.length < 3">
                    <plus-outlined />
                  </div>
                </a-upload>
              </a-form-item> -->
          </a-form>
          <div class="item_button">
            <a-button @click="handleSubmit" type="primary">提交</a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import api from '@renderer/api/problem'
import { message, Modal, Empty } from 'ant-design-vue'
import { SearchOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { formatDate } from '@renderer/utils'
const router = useRouter()
const currentRoute = router.currentRoute
const problemState = reactive({
  rules: {
    qsType: [{ required: true, message: '请选择问题类型', trigger: 'change' }],
    keyWords: [{ type: 'array', required: true, message: '请选择问题关键词', trigger: 'change' }],
    description: [
      { required: true, message: '请输入问题描述', trigger: 'blur' },
      { min: 0, max: 300, message: '限制300个字符', trigger: 'blur' },
    ],
    reply: [
      { required: true, message: '请输入内容', trigger: 'blur' },
      { min: 0, max: 300, message: '限制300个字符', trigger: 'blur' },
    ],
    phone: [
      {
        pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
        message: '请输入正确的电话格式',
        trigger: 'blur'
      }
    ]
  },
  form: {
    reply: "",
    replyType: 1,
    roleType: '1',
    files: []
  },
  info: {},
  fileList: [],
  replyList: [],
  isReply: false,
})
const formRef = ref();
const seach = () => {
  window.api.fetchData(api.getInfo(JSON.parse(JSON.stringify(currentRoute.value.params)))).then((res) => {
    if (res.code === 200) {
      problemState.fileList = res.data.files.map((item) => ({
        uid: item.id,
        name: item.fileName,
        status: 'done',
        url: item.filePath
      }))
      res.data.replyList.forEach((item) => {
        if (item.files && item.files.length) {
          item.replyFileList = item.files.map((item) => ({
            uid: item.id,
            name: item.fileName,
            status: 'done',
            url: item.filePath
          }))
        }
      })
      problemState.replyList = res.data.replyList
      res.data.createdAt = formatDate(res.data.createdAt, 'yyyy-MM-dd hh:mm')
      problemState.info = { ...res.data, keyWords: res.data.keyWords.split(',') }
    } else {
      message.error(res.data)
    }
  })
}
const back = () => {
  router.go(-1)
}
//继续反馈
const handlReply = () => {
  problemState.isReply = true

}
//添加回复
const handleSubmit = () => {
  formRef.value
    .validate()
    .then(async () => {
      console.log(555,JSON.parse(
              JSON.stringify({ ...problemState.form, feedbackId: problemState.info.id })
            ));

      window.api
        .fetchData(
          api.addReply(
            JSON.parse(
              JSON.stringify({ ...problemState.form, feedbackId: problemState.info.id })
            )
          )
        )
        .then((res) => {
          if (res.code === 200) {
            message.success(res.msg)
            formRef.value.resetFields()
            seach()
            problemState.isReply = false
          } else {
            message.error(res.data)
          }
        }
        )
    })
    .catch(error => {
      console.log('error', error);
    });

  // this.$refs.formAdd
  //       .validate()
  //       .then(() => {
  //         console.log('req',{ ...this.formState, feedbackId: this.$route.params.id, roleType: "1" })
  //         api.addReply({ ...this.formState, feedbackId: this.$route.params.id, roleType: "1" }).then(res => {
  //           if (res.code == 200) {
  //             message.success('添加成功');
  //             this.reset();
  //             this.getList();
  //           }
  //         })
  //       })
  //       .catch((error) => {
  //         console.log('error', error);
  //       });

}
onMounted(() => {
  seach()
})
</script>
<style lang="scss" scope>
@use './css/details.scss' as vars;
</style>
